<template>
  <div class="swiper-manager">
    <!-- 最上面标题 -->
    <div class="swiper-title">轮播图管理</div>
    <!-- 搜索的区域 -->
    <div class="search">
      <!-- 筛选标题 -->
      <div class="s-title">
        <img
          style="width: 16px; height: 16px; vertical-align: middle"
          src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u453.png"
          alt=""
        />
        <span class="st-text">筛选</span>
      </div>
      <!-- 搜索框 -->
      <div class="s-content">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="输入搜索：">
            <el-input v-model="playname" placeholder="输入轮播图标题" />
          </el-form-item>
          <el-form-item label="上传时间：">
            <el-col :span="11">
              <el-date-picker
                v-model="starttime"
                type="date"
                placeholder="开始日期"
                style="width: 100%"
              />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="endtime"
                placeholder="结束日期"
                style="width: 100%"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <!-- 筛选按钮 -->
            <el-button class="btn" type="primary" @click="search">
              <img
                src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u450.png"
                alt=""
              />筛选
            </el-button>
            <!-- 清空筛选条件按钮 -->
            <span class="btn1" @click="reset">清空筛选条件</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 轮播图列表区 -->
    <div class="list">
      <!-- 新增、回收站按钮 -->
      <div class="l-top">
        <div class="lt-left">
          <img
            style="vertical-align: middle"
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u434.png"
            alt=""
          />
          <span class="ll-text">轮播图列表</span>
        </div>
        <div class="lt-right">
          <!-- 新增轮播图按钮 -->
          <el-button class="addBtn" type="primary" @click="toAdd">
            <img
              src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u438.png"
              alt=""
            />
            <span style="margin-left: 5px">新增轮播图</span>
          </el-button>
          <!-- 回收站按钮 -->
          <el-button class="delBtn" type="primary" @click="toBin">
            <img
              src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u441.png"
              alt=""
            />
            <span style="margin-left: 5px">回收站</span>
          </el-button>
        </div>
      </div>
      <!-- 表格区 -->
      <div class="l-table">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          
          <el-table-column type="selection" width="55" />

          <el-table-column property="playname" label="轮播图名称">
          </el-table-column>

          <el-table-column property="playurl" label="缩略图">
            <template #default="scope"
              ><img :src="scope.row.playurl" style="width: 97px; height: 54px"
            /></template>
          </el-table-column>

          <el-table-column property="persion" label="上传人"> </el-table-column>

          <el-table-column property="uptime" label="上传时间">
            <!-- <template #default="scope">{{ scope.row.date }}</template> -->
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scoped">
              <el-button
                style="color: #9137f3"
                link
                type="primary"
                size="small"
                @click="toEdit(scoped.row.id)"
                >编辑</el-button
              >
              <el-button
                style="color: #9137f3"
                link
                type="primary"
                size="small"
                @click="inBin(scoped.row.id)"
                >加入回收站</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="bottom">
        <div
          style="color: #999999; font-size: 13px; cursor: pointer"
          @click="allIn"
        >
          批量加入回收站
        </div>
        <div class="total">
          <span style="font-family: '思源黑体'; font-weight: 400">共</span>
          <span
            style="
              font-family: '思源黑体 Bold', '思源黑体 ,Regular';
              font-weight: 700;
              color: #9137f3;
            "
            >{{ Math.ceil(total / limit) }}</span
          >
          <span style="font-family: '思源黑体'; font-weight: 400">页/</span>
          <span
            style="
              font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
              font-weight: 700;
              color: #9137f3;
            "
            >{{ total }}</span
          >
          <span style="font-family: '思源黑体'; font-weight: 400">条数据</span>
          <el-pagination
            v-model:page-size="limit"
            :page-sizes="[10, 20, 30]"
            default
            background
            @current-change="changePage"
            layout="prev, pager, next"
            :total="total"
            class="mt-4"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "../utils/http";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  ElCol,
  ElDatePicker,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElMessage,
} from "element-plus";

// 获取选择的所有数据的id
let ids = "";
let idS = [];
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log("multipleSelection", multipleSelection.value);
};

//循环取id
const getId = function () {
  for (let e of multipleSelection.value) {
    idS.push(e.id);
  }
  console.log(idS);
  for (let i = 0; i < idS.length; i++) {
    if (i == idS.length - 1) {
      ids += `ids=${idS[i]}`;
    } else {
      ids += `ids=${idS[i]}&`;
    }
  }
  console.log(5555, ids);
};

// 一条加入回收站
const inBin = (id) => {
  axios({
    url: "/play/delAll",
    method: "post",
    params: {
      ids: id,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: "加入回收站成功",
        type: "success",
      });
      getData();
    }
  });
};

// 批量加入回收站
const allIn = () => {
  getId();
  axios({
    url: `/play/delAll?${ids}`,
    method: "post",
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: "批量加入回收站成功",
        type: "success",
      });
      getData();
    }
  });
};

//清空筛选条件
const reset = () => {
  playname.value = "";
  starttime.value = "";
  endtime.value = "";
  getData();
};

// 时间格式转化
const toDub = (n) => (n < 10 ? "0" + n : "" + n);
const toDate = (date) => {
  const oDate = new Date(date);
  return (
    oDate.getFullYear() +
    "-" +
    toDub(oDate.getMonth() + 1) +
    "-" +
    toDub(oDate.getDate())
  );
};

// 筛选
let playname = ref("");
let starttime = ref("");
let endtime = ref("");
const search = () => {
  axios({
    url: "/play/list/terms",
    params: {
      playname: playname.value,
      starttime: toDate(starttime.value),
      endtime: toDate(endtime.value),
      page: page.value,
      limit: limit.value,
    },
  }).then(({ data }) => {
    console.log("筛选的", data);
    if (data.code == 0) {
      tableData.value = data.data.list;
      total.value = data.data.totalCount;
    }
  });
};

// 分页
let page = ref(1);
let limit = ref(10);
let total = ref(0);
let changePage = function (value) {
  page.value = value;
  getData();
};

// 新增轮播图跳转
const router = useRouter();
const toAdd = function () {
  router.push({
    name: "swiperAdd",
  });
};
// 跳转回收站
const toBin = function () {
  router.push({
    name: "swiperBin",
  });
};
// 跳转编辑轮播图
const toEdit = function (id) {
  router.push({
    name: "swiperEdit",
    query: { id: id },
  });
};
// 表格
const multipleTableRef = ref();
// const multipleSelection = ref<User[]>([])

//表格的数据
const tableData = ref([]);
// 渲染数据
const getData = () => {
  axios({
    url: "/play/list",
    params: {
      page: page.value,
      limit: limit.value,
    },
  }).then(({ data }) => {
    console.log("11111111", data.data);
    if (data.code == 0) {
      tableData.value = data.data.list;
      total.value = data.data.totalCount;
      console.log("666", tableData.value);
    }
  });
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.total {
  // width: 500px;
  // border: 1px solid red;
  // margin-top: 50px;
  margin-right: 28.8px;
  font-size: 12px;
  color: #333333;
  display: flex;
  align-items: center;
  float: right;
}
// 最外层
.swiper-manager {
  min-width: 1095px - 60px;
  padding: 30px;
}
// 上面标题
.swiper-title {
  font-size: 24px;
  width: 1100px;
  height: 50px;
  font-weight: bold;
  color: #9137f3;
}

// 搜索的大区域
.search {
  width: 1100px;
  height: 135px;
  border: 1px solid #e4e4e4;
  background-color: white;
}
// 筛选
.s-title {
  padding-top: 17px;
  padding-left: 30px;
  padding-bottom: 25px;
  .st-text {
    color: #999999;
    font-size: 14px;
    margin-left: 5px;
  }
}
// 搜索的可输入区域
.s-content {
  padding-left: 30px;
  line-height: 50px;

  // 时间范围的横杠
  .text-gray-500 {
    margin-left: 15px;
  }

  // 筛选按钮
  .btn {
    background-color: #9137f3;
    border: 1px solid #9137f3;
  }
  //   清空筛选条件按钮
  .btn1 {
    color: #9137f3;
    background-color: white;
    border: 1px solid white;
    margin-left: 20px;
    cursor: pointer;
  }
}
// 轮播图列表区
.list {
  background-color: white;
  border: 1px solid #e4e4e4;
  width: 1100px - 60px;
  height: 100%;
  margin-top: 10px;
  padding: 15px 30px;
}
// 新增、回收站按钮区域
.l-top {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// 轮播图列表文字
.ll-text {
  color: #999999;
  font-size: 14px;
  margin-left: 5px;
}
// 新增轮播图按钮
.addBtn,
.delBtn {
  background-color: white;
  border: 1px solid #9137f3;
  color: #9137f3;
  margin-left: 10px;
}
// 表格
.l-table {
  padding-top: 20px;
  text-align: center;
}
// 底部批量、分页
.bottom {
  // border: 1px solid blue;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>

<style>
.el-main {
  padding: 0;
  background-color: #fcfcfc;
}
.el-input__wrapper {
  width: 180px;
}
.el-table th.el-table__cell {
  background-color: #9137f3;
  height: 56px;
  color: white;
  text-align: center;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  border-radius: 16px;
  border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev:hover {
  color: #ffffff;
  background-color: #9239f3;
}

.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev:disabled {
  color: #9239f3;
  background-color: #ffffff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  color: #9239f3;
  background-color: #ffffff;
  border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li:hover {
  color: #ffffff;
  background-color: #9239f3;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  color: #ffffff;
  background-color: #9239f3;
}
</style>
